<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>天天美印</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	<script type="text/javascript" src="hammer.min.js"></script>
	<link type="text/css" rel="stylesheet" href="common.css" />	
	<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
	<style type="text/css">
		ul,li{
			padding:0;
			margin:0;
			list-style: none;
		}
		body{
			/*background:#f2f2f2;*/
		}

		/*main css*/
		#main{
			width:100%;
		}
		div#workbg img{
			width:100%;
		}
		div#workbg h3{
			margin:0;
			font-size:1.7rem;
			padding:10px 12px;
			color:#000;
		}
		div#userWorkShow{
			padding:10px 12px;
			font-size:0;
		}
		div#userWorkShow img{
			display: inline-block;
			width:15%;
			border-radius:100%;
			vertical-align: top;
		}
		div#userWorkShow div{
			display: inline-block;
			font-size:1.4rem;
			vertical-align: top;
		}
		div#userWorkShow div:nth-of-type(1){
			width:50%;
			padding:0 10px;
		}
		div#userWorkShow div:nth-of-type(1) span{
			display: block;
			font-size:1.2rem;
			color:#959494;
			margin-bottom:3px;
		}
		div#userWorkShow div:nth-of-type(1) span:nth-of-type(1){
			font-size:1.4rem;
			color:#ed0f64;
		}
		div#userWorkShow div:nth-of-type(2){
			width:30%;
			font-size:0;
			height:40px;
		}
		div#userWorkShow div:nth-of-type(2) span{
			width:50%;
			display: inline-block;
			font-size:1.1rem;
			text-align:center;
			color:#fff;
		}
		div#userWorkShow div:nth-of-type(2) span:nth-of-type(1){
			background:#ed0f64;
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px
		}
		div#userWorkShow div:nth-of-type(2) span:nth-of-type(2){
			background:#f4858e;
			border-top-right-radius:3px;
			border-bottom-right-radius:3px;
		}
		div#userWorkShow div:nth-of-type(2) span img{
			width:40%;
			margin:2px 30% ;
			display:block;
		}
		
		div#comments-block div.comments-head{
			background:#ed0f64;
			color:#fff;
			font-size:1.7rem;
			padding:8px 12px;
		}
		div.comments-head span{
			margin-left:8px;
		}
		div.comments ul{
			padding:0 12px;
		}
		div.comments ul li{
			border-bottom:1px solid #cfcfcf;
			padding:7px 0;
			font-size:0;
		}
		div.comments ul li:last-child{
			border-bottom:none;
		}
		div.comments ul li img{
			border-radius:100%;
			width:15%;
			display: inline-block;
			vertical-align: top;
		}
		div.comments ul li div{
			display: inline-block;
			font-size:1.3rem;
			width:85%;
			color:#656565;
		}
		div.comments ul li div span{
			display: block;
			padding:0  0 0 12px;
		}
		div.comments ul li div span:nth-of-type(2){
			font-size:1.2rem;
			color:#b8b8b8;
			margin-top:3px;
		}
		div.comments ul li div span:nth-of-type(2) a{
			padding-left:22px;
			float:right;
			color:#777777;
			display: inline-block !important;
			height:18px;
			width:18px;
		}
		div.comments ul li div span:nth-of-type(2) a:nth-of-type(1){
			background: url(comment.png) center center no-repeat;
			background-size:18px 18px;
			margin-left:10px;
		}
		div.comments ul li div span:nth-of-type(2) a:nth-of-type(2){
			background: url(collect.png) center center no-repeat;
			background-size:18px 18px;
		}
		#ipt{
			position: fixed;
			width: 100%;
			bottom: 0;
			font-size:0;
			padding:5px;
			border-top:1px solid #dedede;
			background: #fbfbfb;
		}
		input{
			width: 80%;
			display: inline-block;
			line-height: 33px;
			height: 33px;
			color:#000;
			font-size:1.4rem;
			border:none;
			background: #fff;
			border:1px solid #dedede;
			border-radius:5px;
			margin-right:2%;
		}
		button{
            padding:0;
            margin:0;
			width: 18%;
			display: inline-block;
			font-size:1.4rem;
			height: 33px;
			vertical-align:top;
			background:#ed0f64;
			border:none;
			border-radius:5px;
			color:#fff;
		}
    
    /*轮播图*/
    #banner{
        background: #303030;
        width:100%;
        overflow-x:hidden;
        padding:12px 12px 12px 5px;
    }
    #banner ul{
        width:100%;
        overflow-x:auto;
        word-break:keep-all;
        white-space:nowrap;
    }
    #banner ul li{
        display: inline-block;
        margin-left:7px;
        width:25%;
    }
    #banner ul li img{
        width:100%;
    }
	</style>
</head>
<body>
	<div id="main">
		<div id="workbg">
			<img src="otherPhoto.png" />
            <h3 id="productName">毕业纪念台历-创意台历</h3>
		</div>
		<div id="userWorkShow" uid="">
			<img id="userHead" src="userhead.png" />
			<div>
				<span id="nickname">轻舞飞扬</span>
				<span id="datetime">制作于2015-06-25</span>
			</div>
<!--			<div class="combnt" >-->
<!--				<span class="tozan" id="zanlist" zanlist="">-->
<!--					<img class="tozan" src="collect_01.png" />-->
<!--					点赞-->
<!--				</span>-->
<!--				<span class="tocom">-->
<!--					<img class="tocom" src="comment_01.png" />-->
<!--					评论-->
<!--				</span>-->
<!--			</div>-->
		</div>
		<div id="banner">
<!--			<div class="swiper-container">-->
<!--		        <div class="swiper-wrapper">-->
<!--		            <div class="swiper-slide"><img src="work_01.png" /></div>-->
<!--		            <div class="swiper-slide"><img src="work_01.png" /></div>-->
<!--		            <div class="swiper-slide"><img src="work_01.png" /></div>-->
<!--		            <div class="swiper-slide"><img src="work_01.png" /></div>-->
<!--		        </div>-->
		        <!-- Add Pagination -->
		        <!-- <div class="swiper-pagination"></div> -->
<!--	   	 	</div>-->

<!--            <ul>-->
<!--				<li><img src="../images/work_01.png" /></li>-->
<!--                <li><img src="../images/work_01.png" /></li>-->
<!--                <li><img src="../images/work_01.png" /></li>-->
<!--                <li><img src="../images/work_01.png" /></li>-->
<!--                <li><img src="../images/work_01.png" /></li>-->
<!--            </ul>-->
	   	</div>
	   	
	   	<div id="comments-block">
			<div class="comments-head">评论 <span id="disnum">0</span></div>
			<div class="comments">
				<ul>
<!--					<li>-->
<!--						<img src="headImg.png" />-->
<!--						<div>-->
<!--							<span>好看！！致我们逝去的青春~~</span>-->
<!--							<span>-->
<!--								2015-7-1 10:39-->
<!--								<a></a>-->
<!--								<a></a>-->
<!--							</span>-->
<!--						</div>-->
<!--					</li>-->

				</ul>
			</div>
	   	</div>
	   	
	   	
	</div>
    <div style="height:40px;"></div>
	<div id="footer">
		<div id="ipt"><input type="text" /><button class="sendbtn">发送</button></div>
	</div>
</body>

<script type="text/javascript">
    var showid;
    var namearr=[];
	var sender = api.getUid();//重新获取用户ID
	var getter = 0;
    var userface = api.getUserFace();
    var commentnum = 0;
    var dataObj = {};
    
	$(document).ready(function(){
        
        //$(".comments-head span").html(data.dis_num);
                      //alert(345);return;
                      
        dataObj = api.getjaveSpritObject();
        
                      //alert(JSON.stringify(dataObj));
        showid = dataObj.id;
        if(dataObj.face == '' || dataObj.face == undefined || dataObj.face == null){
            $("#userHead").attr("src","uidhead.png");
        }else{
            $("#userHead").attr("src","http://7xqkvn.com1.z0.glb.clouddn.com/"+dataObj.face+"?imageView2/2/w/100");
        }
       
        $("#workbg img").attr("src","http://7xqkvn.com1.z0.glb.clouddn.com/"+dataObj.cover+"?imageView2/2/w/400");
        $("#productName").html(dataObj.title);
        $("#datetime").html(dataObj.create_time);
        $("#userWorkShow").attr("uid",dataObj.uid);
        $("#zanlist").attr("zanlist",dataObj.zanlist);
        $("#nickname").html(dataObj.name);
        $("#disnum").html(dataObj.dis_num);
        commentnum = dataObj.dis_num;
                      
                      $("#banner").html("");
                      var divimg =  '<ul>';

                     
        for(var i in dataObj.pics){
            var pic= dataObj.pics[i];
                      
            divimg += '<li><img class="swiper-img" picimg="'+pic+'" src="http://7xqkvn.com1.z0.glb.clouddn.com/'+pic+'?imageView2/2/h/200" /></li>';
                      
        }
                      
                      divimg+='</ul>' ;
                      
                      $("#banner").html(divimg);
                      
        $("#userHead").css("height",$("div#userWorkShow img").width());
        $("div#userWorkShow div:nth-of-type(1)").css("height",$("div#userWorkShow img").height());
        $("div#userWorkShow div:nth-of-type(1)").css("padding-top",($("div#userWorkShow img").height()-40)/2);
        $("div#userWorkShow div:nth-of-type(2)").css("margin-top",($("div#userWorkShow img").height()-40)/2);
        $("div.comments ul li div").css("padding-top",($("div.comments ul li img").height()-28)/2);

		$.ajax({
               
          url:"http://ttmy.len.so/app/appapi/getcommentlist/id/"+showid,
          type:'get',     
          dataType:'JSONP',
          success: function(data){
            
          	if(data.status == 1){
               
               
          		for(var i in data.list){
	          		var comment = data.list[i];
	          		var listr = '<li>';
               if(comment.face == '' || comment.face == undefined || comment.face == null){
                    listr += '<img src="uidhead.png">';
               
               }else{
               
                    listr +='<img src="http://7xqkvn.com1.z0.glb.clouddn.com/'+comment.face+'?imageView2/2/h/100" />';
               }
							//'<img src="headImg.png" />'+
							listr +='<div >'+
								'<span>'+comment.content+'</span>'+
								'<span class="combnt" uid="'+comment.sender+'">'+comment.create_time+
								'<a class="tocom"></a></span>'+
							'</div>'+
						'</li>';
               
					$(".comments ul").append(listr);
	          	}
            }
          }
        })
		 
	})


	function comment(showid,sender,getter,zan,content){
        if (zan == 1){
            api.showSuccess("点赞成功");
        }else{
            api.showSuccess("评论成功");
        }
		$.ajax({
	        url:"http://ttmy.len.so/app/appapi/comment",
	        type:'get',     
	        dataType:'JSONP',
	        //data:'showid='+showid+"&sender="+sender+"&zan=1",
	        data:{showid:showid,sender:sender,getter:getter,zan:zan,content:content},
	        success:function (data){
	        	if(data.status==1){
	        		if(zan==1){
               var zanlist = $("#zanlist").attr("zanlist");
               $("#zanlist").attr("zanlist",zanlist+sender+',');
               
               //api.dianzan(1,showid);
               }
               else{
               commentnum++;
               //api.comment(2,showid);
               $("#disnum").html(commentnum);
	        			var listr = '<li>';
                        if(userface == '' || userface == undefined || userface == null){
                            listr+='<img src="uidhead.png" />';
                        }else{
                            listr+='<img src="http://7xqkvn.com1.z0.glb.clouddn.com/'+userface+'?imageView2/2/h/300" />';
                        }
								//'<img src="headImg.png" />'+
								listr+='<div >';
               
									listr +='<span>'+content+'</span>'+
									'<span class="combnt" uid="'+sender+'">刚刚'+
									'<a class="tocom"></a></span>'+
								'</div>'+
							'</li>';
						$(".comments ul").append(listr);
	        		}
	        	}
	        },
        
        });
	}

 	function bindEvent () {
	  	var mc = new Hammer.Manager(document.body);
	    mc.add(new Hammer.Tap());
	    
	    mc.on("tap", function (e) {
	        var className=$(e.target).attr("class");

	        if(className=="tozan"){
	        	//先判断有没有点过赞
	        	var zanlist = $("#zanlist").attr("zanlist");
	        	if(zanlist.indexOf(','+sender+',')==-1){
	        		comment(showid,sender,0,1,'');
                    api.showSuccess("点赞成功");
	        	}else{
	        		api.showMessage("您已经点过赞了！");return;
	        	}
	        	
	        }else if(className=="tocom"){
	        	getter = $(e.target).parent(".combnt").attr("uid");
	        	if(getter==$("#userWorkShow").attr("uid")||getter==sender){
	        		getter = 0;
	        	}
	        	$("#ipt").css("display","block");
	        }else if(className=="sendbtn"){
	        	var content = $("input").val();
              if(content==''){
              api.showError("评论不能为空");
              return;
              }
	        	$("input").val('');
	        	$("#ipt").css("display","none");

	        	comment(showid,sender,getter,0,content);
	        }
              
              if(className == "swiper-img"){
                    var imgsrc = $(e.target).attr("picimg");
              api.showBigImage(imgsrc);
              
              }

	        // if(e.target.id=="btn-login"){
	        // 	window.location.href=$(e.target).attr("data")+".html";
	        // }

	    });
	}
	bindEvent();
</script>
</html>